<template>
  <div class="index-table">
    <el-table class="customer-table" height="368" :data="tableData">
      <el-table-column prop="index" label="序号" width="50">
        <template slot-scope="scope">
          <span>{{ searchFrom.pageSize * (searchFrom.pageIndex - 1)  + 1 + scope.$index }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="质控点" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="standardValue" label="标准值">
      </el-table-column>
      <el-table-column prop="targetValue" label="目标值">
      </el-table-column>
      <el-table-column prop="currentValue" label="当前值">
        <template slot-scope="scope">
          {{scope.row.currentValue || scope.row.autoUpdateValue || scope.row.personnelTrainingState}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="目标完成进度" width="100">
        <template slot-scope="scope">
          {{ getRote(scope.row.currentValue || scope.row.autoUpdateValue || scope.row.personnelTrainingState, scope.row.standardValue) }} %
        </template>
      </el-table-column>
    </el-table>

    <div class="margin-t-10 margin-b-10 text-right" v-if="tableData.length">
      <el-pagination @current-change="changePage" :current-page.sync="searchFrom.pageIndex" :page-size="searchFrom.pageSize" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { filterParams, division, accMul } from '@/config/utils'
import { getMyPointList } from '@/api/target'

export default {
  name: 'indexTable',
  props: {
    targetStandardId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      searchFrom: {
        pageSize: 10,
        pageIndex: 1,
        targetStandardId: ''
      },
      // 表格参数
      total: 0,
      tableData: []
    }
  },
  methods: {
    // 列表数据
    getList() {
      const params = filterParams(this.searchFrom)
      getMyPointList(params)
        .then(res => {
          this.tableData = res.dataList || []
          this.total = res.total || 0
        })
        .catch()
    },
    // 切换页码
    changePage(val) {
      this.searchFrom.pageIndex = val
      this.getList()
    },
    getRote(currentValue, standardValue) {
      /*  let num = 0

      if (currentValue === '有') {
        num = 1
      }

      if (currentValue === '无') {
        num = 0
      }

      if (currentValue == null) {
        num = 0
      }

      if (currentValue == 0 && targetValue == 0) {
        return 100
      }
      if (targetValue == 0) {
        return 0
      }

      return accMul(num, 100) */

      if (currentValue === '有' || currentValue === '是') {
        currentValue = 1
      }

      if (currentValue === '无' || currentValue == '否') {
        currentValue = 0
      }

      if (currentValue == null) {
        currentValue = 0
      }

      if (standardValue === '有' || standardValue == '是') {
        standardValue = 1
      }

      if (standardValue === '无' || standardValue == '否') {
        standardValue = 0
      }

      if (standardValue == null) {
        standardValue = 0
      }

      if (currentValue == 0 && standardValue == 0) {
        return 100
      }

      if (standardValue == 0) {
        return 0
      }
      // const result = Math.round((standardValue / currentValue) * 100) / 100
      // const result = Math.round((standardValue / currentValue) * 100) / 100
      return Math.round((currentValue / standardValue) * 100 * 100) / 100
    }
  },
  watch: {
    targetStandardId(val) {
      this.searchFrom.targetStandardId = val
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.index-table {
  flex: 1;
  padding: 0 0 10px 20px;
  .customer-table .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0 !important;
  }
  .customer-table.el-table::before {
    height: 0;
  }
}
</style>
